/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import Swiper from "react-native-swiper";
import SplashScreen from "react-native-splash-screen";

import {
  Color, ScreenWidth, FontSize, scale, ScreenHeight,
} from "../common";
import StorageUtil from "../utils/StorageUtil";
import NavigatorUtil from "../utils/NavigatorUtil";
import Button from "../widget/common/NCButton";
import HolderImage from "../widget/common/HolderImage";

const SWAPERHEIGHT = ScreenHeight;
const DOTSIZE = scale * 8;

export default class FirstLunch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showButton: false,
    };
    StorageUtil.isFirstLunch().then(isFirstLunch => {
      if (!isFirstLunch) {
        NavigatorUtil.lunchHome();
      }
    });
  }

  componentDidMount() {
    StorageUtil.isFirstLunch().then(isFirstLunch => {
      if (isFirstLunch) {
        SplashScreen.hide();
        StorageUtil.saveHasFirstLunch();
      }
    });
  }

  handleIndexChange = index => {
    this.setState({
      showButton: index === 2,
    });
  };

  render() {
    const { showButton } = this.state;
    const normalDot = showButton ? <View /> : <View style={styles.normal_dot} />;
    const activeDot = showButton ? <View /> : <View style={styles.active_dot} />;
    const swipeData = [
      require("../img/splash_one.jpg"),
      require("../img/splash_two.jpg"),
      require("../img/splash_three.jpg"),
    ];
    return (
      <View style={styles.container}>
        <Swiper
          autoplay={false}
          paginationStyle={styles.pagination}
          dot={normalDot}
          activeDot={activeDot}
          height={SWAPERHEIGHT}
          loop={false}
          onIndexChanged={this.handleIndexChange}
        >
          {swipeData.map((item, index) => (
            <HolderImage key={String(index)} source={item} style={styles.wrapper} resizeMode="stretch" />
          ))}
        </Swiper>
        {showButton && (
          <Button
            title="点击进入"
            onPress={NavigatorUtil.lunchHome}
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: ScreenWidth,
    height: null,
    backgroundColor: "rgba(0,0,0,0)",
    paddingTop: 0,
  },
  wrapper: {
    flex: 1,
    width: ScreenWidth,
    height: null,
    paddingTop: 0,
  },
  normal_dot: {
    backgroundColor: Color.transparent,
    marginLeft: 8,
    marginRight: 8,
    height: scale * DOTSIZE,
    width: scale * DOTSIZE,
    borderRadius: (scale * DOTSIZE) / 2,
    borderColor: Color.white,
    borderWidth: 1,
  },
  active_dot: {
    backgroundColor: Color.white,
    marginLeft: 8,
    marginRight: 8,
    height: scale * DOTSIZE,
    width: scale * DOTSIZE,
    borderRadius: (scale * DOTSIZE) / 2,
    borderColor: Color.white,
    borderWidth: 1,
  },
  buttonText: {
    fontSize: FontSize.SIZE_15,
    color: Color.white,
  },
  button: {
    position: "absolute",
    height: 34 * scale,
    width: 116 * scale,
    borderRadius: 5 * scale,
    borderWidth: 1,
    backgroundColor: Color.transparent,
    borderColor: Color.white,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "center",
    bottom: ScreenHeight / 20,
  },
});
